import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Input, Tooltip, Icon } from 'antd';
import _ from 'lodash';
import { getPortList } from '@api/task';
import PortManageTable from './components/port-manage-table';
import PortManageModal from './components/port-manage-modal';
import './index.less';

const prefixCls = 'port-manage';
const Search = Input.Search;

class PortManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      filter: {
        page: 1,
        pageSize: 10,
        search: ''
      },
      total: 0,
      tableList: [],
      portManageModalVisible: false
    };
  }

  componentDidMount() {
    this.getPortList();
  }

  //获取端口列表
  getPortList = () => {
    const { filter } = this.state;
    if (filter.search) {
      filter.search = filter.search.replace(/\\/g, '\\\\');
      filter.search = filter.search.replace(/\|/g, '\\|');
    }
    this.setState({ loading: true });
    getPortList(filter)
      .then(res => {
        const data = res.data.data;
        this.setState({
          loading: false,
          tableList: _.get(data, 'list', []),
          total: _.get(data, 'count', 0)
        });
      })
      .catch(() => this.setState({ loading: false }));
  };

  onTableChange = pagination => {
    let { filter } = this.state;
    filter.page = pagination.current;
    filter.pageSize = pagination.pageSize;
    this.setState({ filter }, this.getPortList);
  };

  changeModModalVisible = visible => {
    this.setState({
      portManageModalVisible: visible
    });
  };

  render() {
    const { total, filter, tableList, portManageModalVisible, loading } = this.state;
    const pagination = {
      total: total,
      current: filter.page,
      pageSize: filter.pageSize,
      showQuickJumper: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showSizeChanger: true,
      size: 'small',
      showTotal: num => `共 ${num} 条`
    };

    return (
      <div className={`${prefixCls}`}>
        <div className={`${prefixCls}-title`}>
          端口策略管理
          <Tooltip
            className="info"
            placement="right"
            overlayClassName={`${prefixCls}-title-desc`}
            title="创建资产探测任务时支持自定义选择端口策略"
          >
            <Icon type="exclamation-circle" />
          </Tooltip>
        </div>
        <div className={`${prefixCls}-header`}>
          <div className={`${prefixCls}-header-left`}>
            <Button type="primary" onClick={() => this.changeModModalVisible(true)}>
              添加端口策略模版
            </Button>
          </div>
          <div className={`${prefixCls}-header-right`}>
            <Search
              enterButton
              placeholder="请输入名称或端口"
              onSearch={value => {
                let search = value.toString();
                filter.search = search;
                filter.page = 1;
                this.setState({ filter }, this.getPortList);
              }}
            />
          </div>
        </div>
        <div className={`${prefixCls}-header-count`}>共有“{total}”个端口策略模版</div>
        <div className={`${prefixCls}-body`}>
          <PortManageTable
            loading={loading}
            data={tableList}
            onTableChange={this.onTableChange}
            changeModalVisible={this.changeModModalVisible}
            total={total}
            pagination={pagination}
            getPortList={this.getPortList}
          />
        </div>
        <PortManageModal
          modalVisible={portManageModalVisible}
          changeModalVisible={this.changeModModalVisible}
          getPortList={this.getPortList}
          isAddPort={true}
        />
      </div>
    );
  }
}

PortManage.propTypes = {
  history: PropTypes.object
};

export default PortManage;
